<html>
<head>
    <title>WebRTC Streamer using WHEP</title>
    <link rel="icon" type="image/png" href="webrtc.png" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style>
        whep-video {
            text-align: center;
        }        
    </style>
    <script type="module" src="webrtc-streamer-element.js"></script>
    <script type="module" src="webrtc-streamer-footer-element.js"></script>
    <script type="module" src="webrtc-streamer-menu-element.js"></script>
    <script type="module" src="webrtc-streamer-options-element.js"></script>
    <script type="module" src="webrtc-streamer-algo-element.js"></script>
    <script src="./libs/whep-video.component.js"></script>
</head>
<body>
  <webrtc-streamer-menu id="selector" ></webrtc-streamer-menu>  
  <div id="content">
  </div>  
  <webrtc-streamer-footer></webrtc-streamer-footer>
  <script>
    customElements.whenDefined('webrtc-streamer-menu').then(() => {
        let selectorElement = document.getElementById("selector");
        let streamElement = document.getElementById("content");

        selectorElement.addEventListener('init', (event) => {
                let mediaList = event.detail;
                if (mediaList.length > 0) {
                    const random = mediaList.sort(() => .5 - Math.random());
                    let media = JSON.stringify(random[0])
                    selectorElement.setAttribute('selected', media);
                }
        });
        selectorElement.addEventListener('change', (event) => {
            const url= JSON.parse(event.detail.url);
            streamElement.removeChild(streamElement.firstChild);
            let whep = document.createElement('whep-video');
            whep.setAttribute('muted', true);
            whep.setAttribute('autoplay', true);
            whep.setAttribute('src', `${location.protocol}//${location.hostname}:${location.port}/api/whep?url=${encodeURIComponent(url.video)}&audio=${encodeURIComponent(url.audio)}&options=rtptransport%3dtcp%26timeout%3d60`);
            streamElement.appendChild(whep);
        });
    });
  </script>      
</body>
</html>